<template>
  <a-drawer
    :title="drawerState.title"
    class="modify-role-drawer"
    :width="600"
    :body-style="{ paddingBottom: '80px' }"
    :visible="drawerState.visiable"
    @close="onClose"
  >
    <a-form
      ref="formRef"
      :model="drawerState.formData"
      :rules="drawerState.formRules"
      :label-col="drawerState.labelCol"
      :wrapper-col="drawerState.wrapperCol"
    >
      <a-form-item label="角色名称" name="name">
        <a-input v-model:value="drawerState.formData.name" />
      </a-form-item>
      <a-form-item label="角色标识" name="code">
        <a-input v-model:value="drawerState.formData.code" />
      </a-form-item>
      <a-form-item label="备注" name="note">
        <a-input v-model:value="drawerState.formData.note" />
      </a-form-item>
    </a-form>
    <a-divider>权限配置</a-divider>
    <strong class="modify-role-drawer__select-app-label"
      >选择角色所属系统:</strong
    >
    <a-select
      v-model:value="drawerState.currentApp"
      style="width: 60%"
      :disabled="drawerState.selectAppDisable"
    >
      <a-select-option
        :value="app.id"
        v-for="app in drawerState.allPermData"
        :key="app.id"
        >{{ app.name }}</a-select-option
      >
    </a-select>
    <a-tree
      checkable
      showLine
      checkStrictly
      :tree-data="drawerState.treeData"
      v-model:checkedKeys="drawerState.treeCheckedKeys"
      v-model:expandedKeys="drawerState.treeExpandedKeys"
      :replace-fields="drawerState.treeReplaceFields"
      @check="onTreeCheck"
    />
    <div class="modify-role-drawer__bottom-option">
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="onEnter" :loading="loading"
        >确认</a-button
      >
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { DrawerState, TreeCheckEvent } from '../types'

withDefaults(
  defineProps<{
    drawerState: DrawerState
    loading?: boolean
  }>(),
  { loading: false }
)

const emits = defineEmits<{
  (e: 'close'): void
  (e: 'enter'): void
  (e: 'treeCheck', checkedKeys: string[], event: TreeCheckEvent): void
}>()

const formRef = ref()

const onClose = () => {
  formRef.value.resetFields()
  emits('close')
}
const onEnter = () => emits('enter')

const onTreeCheck = (checkedKeys: string[], e: TreeCheckEvent) =>
  emits('treeCheck', checkedKeys, e)
</script>

<style lang="scss" scoped>
@include b(modify-role-drawer) {
  @include e(select-app-label) {
    margin-right: 14px;
  }
  @include e(bottom-option) {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e9e9e9;
    padding: 10px 16px;
    background: #fff;
    text-align: right;
    z-index: 1;
  }
}
</style>
